<!DOCTYPE html>
<html>

	<head>
		<!--申明当前页面的编码集-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!--网页标题-->
		<title>我也要考试</title>
		<!--适配当前屏幕-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<!--iphone中safari私有meta标签,
        允许全屏模式浏览,隐藏浏览器导航栏-->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!--防止数字调用电话-->
		<meta content="telephone=no" name="format-detection" />
		<!--iphone中safari顶端的状态条的样式black(黑色)-->
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
		<style type="text/css">
			/*reset 重置*/
			
			body,
			ul,
			ol,
			p,
			h1,
			h2,
			h3,
			h4,
			h5,
			dl,
			dd,
			form,
			input,
			textarea,
			td,
			th,
			button,
			strong,
			em {
				margin: 0;
				padding: 0;
			}
			
			li {
				list-style: none;
				vertical-align: top;
			}
			
			table {
				border-collapse: collapse;
			}
			
			textarea {
				resize: none;
				overflow: auto;
			}
			
			img {
				display: block;
				border: none;
				vertical-align: middle;
				width: 100%;
				height: 100%;
			}
			
			em {
				font-style: normal;
			}
			
			a {
				text-decoration: none;
			}
			
			a,
			input {
				-webkit-appearance: none;
				/*屏蔽阴影*/
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				/*ios android去除自带阴影的样式*/
			}
			
			a,
			img {
				/* 禁止长按链接与图片弹出菜单 */
				-webkit-touch-callout: none;
			}
			
			html,
			body {
				/* 禁止选中文本(如无文本选中需求,此为必选项) */
				-webkit-user-select: none;
				user-select: none;
			}
			/*public*/
			
			html {
				font-size: 20px;
			}
			
			html,
			body {
				position: relative;
				height: 100%;
			}
			
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				margin: 0;
				padding: 0;
			}
			
			.starPage {
				height: 100%;
				padding: 0 1.5%;
				background-color: #e8faf2;
			}
			
			.otherPage {
				height: 100%;
				background-color: #d2f2e3;
			}
			
			.starPage .banner {
				margin-left: 5px;
				margin-top: 1.3rem;
				height: 50%;
			}
			
			.starPage p {
				font-size: 0.65rem;
				margin: 6% 0;
				text-align: center;
			}
			
			.starPage p a {
				color: #54b8a0;
				text-decoration: underline;
			}
			
			.btn {
				width: 48%;
				padding: 0 26%;
				height: 10%;
			}
			
			.contBox {
				position: relative;
				z-index: 100;
				height: 53.4%;
				top: -9%;
				background: #fff;
				margin: 0 8%;
				padding: 13% 5%;
			}
			
			.contBox dl {
				color: #333;
				font-size: 0.8rem;
				text-align: left;
				height: 100%;
			}
			
			.contBox dl dt {
				padding-bottom: 15%;
			}
			
			.contBox dl dd {
				color: #333;
				position: relative;
				padding: 2.5% 4%;
				/*height: 4.8%;*/
				/*line-height: 32px;*/
				border-radius: 16px;
				margin: 6% 0;
				background: transparent;
				transition: all .5 linear;
			}
			
			.swiper-container {
				width: 100%;
				height: 100%;
				margin-left: auto;
				margin-right: auto;
			}
			
			.contBox .true {
				background: #ccf5e6;
			}
			
			.true:after,
			.err:after {
				content: "";
				height: 100%;
				position: absolute;
				right: 15px;
				top: 0;
			}
			
			.true:after {
				width: 14px;
				background: url(img/success.png)no-repeat center center;
				background-size: 100% auto;
			}
			
			.contBox .err {
				background: #f5d7cc;
			}
			
			.err:after {
				width: 11px;
				background: url(img/err.png)no-repeat center center;
				background-size: 100% auto;
			}
			
			.endPage .contBox {
				height: 48.3%;
				padding: 1.5%;
			}
			
			.endPage .contBox table {
				height: 100%;
				box-sizing: border-box;
			}
			
			table tr td {
				text-align: center;
				font-size: 1.35rem;
				color: #30875c;
				border: 1px solid #8dd9bd;
			}
			
			.third td {
				font-size: 0.75rem;
			}
			
			.first {
				height: 35%;
			}
			
			.first td img {
				height: auto;
			}
			
			.first td {
				padding: 7.7% 13.9%;
			}
			
			.second {
				height: 14%;
			}
			
			.second td:nth-child(1),
			.second td:nth-child(3) {
				width: 11.11%;
			}
			
			.third {
				height: 26%;
			}
			
			.forth td {
				text-align: left;
			}
			
			.forth td a {
				font-size: 0.45rem;
				color: #7cd2b2;
				display: inline-block;
				margin-top: 16%;
				margin-left: 8px;
			}
			
			.forth td a span {
				font-size: 0.95rem;
				margin-right: 8px;
			}
			
			.forth td div {
				width: 19.2%;
				float: right;
				margin-right: 3.5%;
				margin-top: 5%;
			}
			
			.swiper-pagination {
				color: #64a58d;
				font-size: 0.7rem;
			}
			
			.swiper-container .swiper-pagination-fraction {
				bottom: 3%;
			}
			
			.swiper-slide {
				position: relative;
				/*text-align: center;*/
				font-size: 18px;
				background: #fff;
				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
			}
			.popBox{
				position: relative;
				box-sizing: border-box;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.7);
				padding: 25% 8% 10%;
				z-index: 11;
				display: none;
			}
			.popBox div img{
				height: auto;
			}
			#closeBtn{
				position: absolute;
			    right: 8%;
			    top: 7.5%;
			    width: 7%;
			    height: auto;
			    font-size: 30px;
			    z-index: 9;
			}
			.allNum{
				position: absolute;
				bottom: 3%;
				text-align: center;
				color: #333;
				width: 100%;
    			z-index: 2;
			}
			@media only screen and (min-width: 401px) {
				html {
					font-size: 24px !important;
				}
			}
			
			body {
				font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
				background: #fff;
				font-size: 0.6rem;
				
			}
		</style>
		<script type="text/javascript">
			
		</script>
	</head>

	<body class="swiper-no-swiping">
		<div id="starPage" class='swiper-slide' style="position: fixed;top: 0;width: 100%;height: 100%;z-index: 10;">
			<div class="starPage">
				<div style="padding: 0 1%;">
					<img class="banner" src="img/banner.png" alt="" />
				</div>
				<p>
					<a id="shuomin">活动说明</a>
				</p>
				<div class="btn">
					<img id="starBtn" src="img/star.png" />
				</div>
			</div>
		</div>
		<div class="swiper-container">
			<div class='swiper-wrapper'>
				<!--<div class='swiper-slide'>
					<div class="starPage">
						<div style="padding: 0 1%;">
							<img class="banner" src="img/banner.png" alt="" />
						</div>
						<p>
							<a href="activityDescription.html">活动说明</a>
						</p>
						<div class="btn">
							<img src="img/star.png" onclick="star(swiper.isBeginning)" />
						</div>
					</div>
				</div>-->
			</div>
			<div class="allNum">
				<span class="num1">1</span>/<span class="num2">10</span>
			</div>
		</div>
		<div id="popBox" class="popBox">
			<div style="width: 100%;height:100%;overflow-y:auto ;overflow-x:hidden;border-radius: 10px;z-index: 10;position: relative;">
				<img src="img/sm_02.png" alt="" />
				<img src="img/sm_03.png" alt="" />
				<img src="img/sm_04.png" alt="" />
				<img src="img/sm_05.png" alt="" />
			</div>
			
			<img id="closeBtn" src="img/X.png"/>
			
		</div>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/src/mobile/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/MD5.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var userCode = "";
			
			var swiper = new Swiper('.swiper-container', {
				observer: true,
				observeParents: true
			});
			try{
				userCode=wv.getid();
				wv.rightShow(false);
			}catch(e){
				console.log("找不到方法WV")
			}
			getAnswerData(setListData);
			$("#starBtn").click(function(){
				star()
			})
			//获取题目信息
			function getAnswerData(callback) {
				if(userCode==""||userCode==undefined){
					return layer.open({
						content: "您还未登录，请登录后再参与活动！",
						skin: 'msg',
						time: 2,

					});
					
				}
				var list = {
					header: reqHead("190221"),
					body: {
						"userCode": userCode
					}
				}
				$.ajax({
					type: "post",
					url: location.origin + "/LuckSys",
					data: {
						"report": JSON.stringify(yanqian(list))
					},
					dataType: "json",
					success: function(data) {
						if(data.header.re_code === "0000") {
//							console.log(data);
							if(data.body.hasFinished == 1) { //1未完成答题  2已完成答题
								callback(data.body.list); //设置题目列表
							} else {
								$("#starBtn").attr("src","img/ckcj.png");
								$("#starBtn").unbind();
								getScore(true); //已完成答题  获取分数      重新加载状
							}
						} else {
							console.log(data.header.re_msg);
						}
					},
					error: function(err) {
						console.log(err.msg)
					}
				});
			}
			$("#shuomin").click(function(){
				$("#popBox").css("display","block")
				$("#closeBtn").click(function(){

					$(this).parent().css("display","none");
				})
			})
			//设置题目列表
			function setListData(list) {
				var divDom = $(".swiper-wrapper");
				var html = "";
				var sy=10-list.length*1;
				$(".allNum .num1").html(sy+1);
				for(var i = 0; i < list.length; i++) {
					if(list.length!=10){
						html = '<div class="swiper-slide">' +
							'<div class="otherPage">' +
							'<div>' +
							'<img src="img/contbg.jpg" alt="" />' +
							'</div>' +
							'<div class="contBox">' +
							'<dl>' +
							'<dt answer="' + list[i].answer + '"questionId="' + list[i].id + '">' + (i + 1+sy) + '、' +list[i].question+ '</dt>' +
							'</dl>' +
							'</div>' +
							'</div>' +
							'</div>';
					}else{
						
					
						html = '<div class="swiper-slide">' +
							'<div class="otherPage">' +
							'<div>' +
							'<img src="img/contbg.jpg" alt="" />' +
							'</div>' +
							'<div class="contBox">' +
							'<dl>' +
							'<dt answer="' + list[i].answer + '"questionId="' + list[i].id + '">' + (i + 1) + '、' +list[i].question+ '</dt>' +
							'</dl>' +
							'</div>' +
							'</div>' +
							'</div>';
					}
					divDom.append(html);
					var html1 = "",
						optionList = list[i].optionList;
					for(var j = 0; j < optionList.length; j++) {
						html1 += '<dd ans-id="' + optionList[j].id + '" questionId="' + optionList[j].questionId + '"><span>' + optionList[j].optionTag + '</span>、' + optionList[j].optionDesc + '</dd>';
					}
					var dlDom = divDom.children().find('dl')[i];
					$(dlDom).append(html1);
				}
				$("dl dd").one('click', function() {
					selAnswer(this);
				})
				
				hidpagenation(swiper.isBeginning); //初始加载隐藏页码
			}

			//隐藏页码
			function hidpagenation(isStarEnd) { //isEnd在最后一页    isBeginning在第一页
				
//				if(isStarEnd) {
//					$('.swiper-pagination').css('display', 'none')
//				} else {
//					$('.swiper-pagination').css('display', 'block')
//				}
			}


            function star(aaa) { //isEnd在最后一页    isBeginning在第一页
            	if(userCode==""||userCode==undefined){
					return layer.open({
						content: "您还未登录，请登录后再参与活动！",
						skin: 'msg',
						time: 2,

					});
					
				}
				if(new Date().getDate() < 7) {

					return layer.open({
						content: "活动未开始",
						skin: 'msg',
						time: 2,

					});

				} else if(new Date().getDate() > 9) {
					return layer.open({
						content: "活动已结束",
						skin: 'msg',
						time:  2,

					});
				}
				$("#starPage").animate({
					"margin-left": "-100%"
				},function(){
					$("#starPage").css("display","none")
				})
				
			}




			//选中答案 判断对错  解绑其他选项
			function selAnswer(obj) {
				hidpagenation(swiper.isBeginning);
				var _this = $(obj),
					selectAns = _this.children('span').html(),
					trueAns = _this.siblings('dt').attr('answer'),
					questionId = _this.attr('questionId');

				if(selectAns === trueAns) {
					_this.addClass("true");
				} else {
					_this.addClass("err");
					var anslist = _this.siblings().children();
					anslist.each(function() {
						if($(this).html() === trueAns) {
							$(this).parent().addClass('true')
						}
					})
				}
				_this.siblings().unbind();

				saveAns(selectAns, questionId, function(num) { //保存答案
					if(swiper.isEnd){//如果是最后一题 答完题获取分数   直接获取
						console.log("是最后一题")
						setTimeout(function(){
							getScore(false);
						},500)
						
					}else{
						setTimeout(function() {//不是最后一题，跳转下一页，继续答题
								$(".allNum .num1").html(num+1);
								swiper.slideNext();
							
						}, 1000)
					}
					
				})
			}

			//获取分数   isrelaod判断是重新加载还是直接获取  
			function getScore(isrelaod) {
				var list = {
					header: reqHead("190223"),
					body: {
						"userCode": userCode
					}
				}
				$.ajax({
					type: "post",
					url: location.origin + "/LuckSys",
					data: {
						"report": JSON.stringify(yanqian(list))
					},
					dataType: "json",
					success: function(data) {
						console.log(data)
						if(data.header.re_code === "0000") {
							var html = "";
							html = '<div class="endPage otherPage" style="position: fixed;top: 0;height:100%;width:100%;z-index:7;">' +
								'<div><img src="img/contbg.jpg" alt="" /></div>' +
								'<div class="contBox"><table width="100%">' +
								'<tr class="first">' +
								'<td colspan="3"><img src="img/kscj.png"/></td>' +
								'</tr><tr class="second">' +
								'<td></td><td></td><td></td>' +
								'</tr><tr class="third">' +
								'<td colspan="3">答对<span></span>题，获得<span></span>分的成绩。</td>' +
								'</tr><tr class="forth">' +
								'<td colspan="3">' +
								'<a href="javaScript:viod()"><span>□□□</span>我也要考试，答题赢红包 >></a>' +
								'<div><img id="hbPic" src="" alt="" /></div>' +
								'</td></tr></table></div></div>';
							if(isrelaod) { //如果是重新加载
								$('body').append(html); 
								$("#starBtn").click(function(){
									$("#starPage").animate({
										"margin-left": "-100%"
									},function(){
										$("#starPage").css("display","none")
									})
								})
//								$(".starPage").css('display', 'none');
//								$(".endPage").fadeIn(300);
							} else {
								$(".allNum").hide();
								$('.swiper-slide').eq(swiper.activeIndex+1).append(html);
								$(".otherPage").css('display', 'none');
								$(".endPage").css({"position":"","top":""});
								$(".endPage").fadeIn(300);;
							}
							$('.swiper-pagination').css('display', 'none')
							var score = data.body.score;
							var hb=data.body.couponValue;
							$('.second td').eq(1).html(score);
							$(".third td span").eq(0).html(score / 10);
							$(".third td span").eq(1).html(score);
							$("#hbPic").attr("src","img/fuli"+hb+".png");
							
						} else {
							console.log(data.header.re_msg);
						}
					},
					error: function(err) {
						console.log(err.msg)
					}
				});
			}

			//保存答案
			function saveAns(selectAns, questionId, callback) {
				var list = {
					header: reqHead("190222"),
					body: {
						"userCode": userCode,
						"answer": selectAns,
						"questionId": questionId
					}
				}
				$.ajax({
					type: "post",
					url: location.origin + "/LuckSys",
					dataType: "json",
					data: {
						"report": JSON.stringify(yanqian(list))
					},
					success: function(data) {
//						console.log(data)
						if(data.header.re_code === "0000") {
							
								callback(data.body.num);
							
							
						}
					},
					error: function(err) {

					}
				});
			}
		</script>
	</body>

</html>